<template>
  <div class="flex1 flex-column gap5 bg-gray-1 br10 box">
    <div class="bold mgb20">综合数据</div>
    <div class="flex-row-top-between">
      <div class="flex-column gap10">
        <div class="flex-row-center-between gap30">
          <span class="grey-text fs14">在线代理</span>
          <div @click="toPageAgent">
            <el-link>
              <span class="main-text fs18 bold">{{ props.data.onlineAgentCount }}</span>
            </el-link>
            <span class="grey-text mgl5 fs14">个</span>
          </div>
        </div>
        <div class="flex-row-center-between gap30">
          <span class="grey-text fs14">总在线率</span>
          <div>
            <span class="fs18 bold">{{ props.data.onlineRate?.replace('%', '') }}</span>
            <span class="fs14 mgl5">%</span>
          </div>
        </div>
      </div>

      <el-divider direction="vertical" style="height: 50px" />

      <div class="flex-column">
        <div class="flex-row-top-between gap30">
          <span class="grey-text fs14">客户平均代理数</span>
          <div>
            <span class="fs18 bold">{{ avgCount }}</span>
            <span class="grey-text mgl5 fs14">个</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import type { AgentData } from '../config'
  import router from '@/router'

  interface IProps {
    title: string
    data: AgentData
  }

  const props = defineProps<IProps>()

  /**----------------------------methods----------------------------------------------------------------------- */

  const avgCount = computed(() => {
    let { agentCount, customerCount } = props.data
    agentCount = agentCount ?? 0
    customerCount = customerCount ?? 0
    if (!customerCount) return 0
    const v = Math.round(Number(agentCount) / Number(customerCount))
    return isNaN(v) ? 0 : v
  })

  const toPageAgent = () => {
    router.push({
      path: 'agent/list',
      query: {
        agentStatus: '1'
      }
    })
  }
</script>

<style scoped lang="less">
  .box {
    padding: 16px;
  }
  .up {
    color: #d92329;
  }
  .down {
    color: #119c59;
  }
</style>
